<template>
  <div class="container grid">
    <div v-for="app in props.data">
      <div
        class="item w-full h-[132px] rounded-[20px] bg-white/60 relative cursor-pointer group flex-center flex-col hover:shadow-md hover:bg-white/90 transition-all"
        @click="select(app)"
      >
        <!-- App Icon -->
        <div class="w-16 h-16 mx-auto rounded-2xl overflow-hidden relative">
          <img
            :src="app.bgImageUrl"
            alt="App Icon"
            class="w-full h-full object-cover"
          />
          <div
            class="mask opacity-0 absolute w-full h-full top-0 left-0 bg-black/60 flex-center text-white"
          >
            <span class="text-[24px]">+</span>
          </div>
        </div>

        <!-- App Name -->
        <p
          class="w-full overflow px-[20px] pt-[12px] text-center text-[14px] text-custom-black font-normal"
        >
          {{ app.name }}
        </p>

        <!-- Plus Icon (shown on hover) -->

        <!-- Check Icon (shown when selected) -->
        <div
          v-if="props.selectedIcons[app.id]"
          class="absolute ml-[48px] mt-[20px]"
        >
          <span
            class="iconfont icon-success_color_icon rounded-[50%] border-2 bg-green-500 text-[16px] text-white"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref, reactive, inject, Ref, computed } from "vue";

const props = defineProps(['data', 'selectedIcons']);

const emits = defineEmits(['select']);

const select = (app) => {
  const icon = { ...app };
  emits('select', icon);
};
</script>
<style scoped lang="scss">
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(autofill, 132px);
  gap: 12px;

  .item {
    &:hover {
      .mask {
        opacity: 1;
      }
    }
  }
}
</style>
